<!-- 反馈列表 -->   
<template>
  <div class="feed-back-box">
    <div class="list-item" v-for="(item,index) in list" :key="index">
        <div class="list-header">
          <div>取餐号: <span class="list-numbers">A082</span> </div> 
          <div class="add-time">
            {{item.addTime}}
          </div>
        </div>
        <div class="list-content">
          {{"番茄牛肉汤饭"}}
        </div>
        
        <div class="opt-box">
            <div class="confirm-btn isbtn">已完成</div>
            <div class="cancle-btn isbtn">取消订单</div>
        </div>
    </div>
  </div> 
</template>

<script>
import api from '@/api/api.js'
export default {
  name: 'shoporders',
  data () {
    return {
      list:[
        { 
          addTime:'2021-10-21 12:31', 
          
        },
      ]
    }
  },
  mounted () { },
  methods: {
    preView(src,index){
      let urls = '';
      if(src.indexOf(",")<0){
        urls = src
      }else{
        urls = src.split(",")[index];
      }
      this.$imagePreview ({
        images: [urls],
        defaultOpt: {
          fullscreenEl: false,
          arrowEl: true,
          preloaderEl: true,
          bgOpacity: 0.85,
          showHideOpacity: true
        }

      })
    },
  }
}
</script>
<style lang="less" scoped>
.list-header{
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.list-numbers{
  font-size: .36rem;
  font-weight: 600;
}
.cancle-btn{
  background: #ccc;

}
.confirm-btn{
  background: green;   
}
.opt-box{

  display: flex;
  justify-content: flex-end;
}
.opt-box>div{
  color: #fff;
  padding: .08rem .24rem;
  margin-left: 0.20rem;
  border-radius: .06rem;
}
.feed-back-box{
    min-height: 100vh;
    background: #f5f5f5;
    padding: .24rem .30rem;
    box-sizing: border-box;
}
.image-box img{
  width: 1.48rem;
  height: 1.48rem;
  border-radius: .12rem;
  margin-top: .20rem;
}
.user-info{
  display: flex;
}
.list-item{
    background: #fff;
    border-radius: .12rem;
    margin-bottom: .24rem;
    padding: .20rem;
    box-shadow: 0 3px 7px #ededed;
}
.list-header{
  display: flex;
  justify-content: space-between;
}
.feed-img{
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  margin-right: .12rem;

}
.add-time{
  color: #999;
  font-size: .22rem;
}
.user-phone{
  color: #666;
  font-size: .18rem;
}
.list-content{
  margin-top: .12rem;
  color: #666;
  letter-spacing: .02rem;

}
</style>
